<template>
  <el-dialog v-model="visible" title="表头设置" width="500px" height="600px" append-to-body @close="onClose">
    <div style="height: 600px; overflow: auto">
      <el-tree :allow-drop="allowDrop" :allow-drag="true" :data="data" draggable default-expand-all node-key="id">
        <template #default="{ node, data }">
          <div style="display: flex; align-items: center">
            <el-checkbox v-model="data.isCheck" size="large" />
            <div @click="data.isCheck = !data.isCheck" style="margin-left: 10px">{{ data.label }}</div>
          </div>
        </template>
      </el-tree>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
        <el-button @click="onClose">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup lang="ts">
const emit = defineEmits(['close', 'submit']);

const visible = ref(false);
const data = ref([]);

const props = defineProps({
  thead: {
    type: Array,
    required: true
  },
  isShowModal: {
    type: Boolean,
    required: true
  }
});

const allowDrop = (draggingNode, dropNode, type) => {
  if (dropNode.data.draggable === false) {
    return false; // 不允许放置到此节点（包括其子节点）
  }
  if (type === 'inner' && draggingNode.data.id === dropNode.data.id) {
    return false; // 不允许放置到自身或其子节点上
  }
  return true; // 其他情况允许放置
};

const onClose = () => {
  emit('close');
};

const submitForm = () => {
  emit(
    'submit',
    data.value.filter((item) => {
      return item.isCheck;
    })
  );
};

watch(
  () => [props.isShowModal, props.thead],
  ([isShowModal, thead]) => {
    console.log(isShowModal, thead);
    visible.value = isShowModal;

    console.log(thead);
    data.value = thead.map((item) => {
      return {
        label: item.name,
        ...item
      };
    });
  },
  { deep: true }
);
</script>

<style scope lang="scss"></style>
